<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 疫情上报管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/materialdesignicons.min.css" rel="stylesheet">
<link href="resources/css/style.min.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.lyear-login:after{
    content:'';
    min-height:inherit;
    font-size:0;
}
.login-center {
    background: #fff;
    min-width: 29.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>
  
<body>
<div class="row lyear-wrapper">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <!-- <a href="index.html"> <img alt="light year admin" src="images/logo-sidebar.png"> </a> -->
        <h3>疫情上报后台</h3>
      </div>
      <form action="#!" method="post" id="app">
        <div class="form-group has-feedback feedback-left">
          <input type="hidden" name="role" v-model="role"/>
          <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" v-model="username"/>
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" class="form-control" id="password" v-model="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input type="text" v-model="verCode" class="form-control" placeholder="验证码" @keyup.enter="login">
            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="col-xs-5">
            <img :src="captcha" class="pull-right" id="captcha" style="cursor: pointer;" @click="changeCaptcha" title="点击刷新" alt="captcha">
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-block btn-primary" type="button" @click="login">立即登录</button>
        </div>
      </form>
      <hr>
      
    </div>
  </div>
</div>
<script type="text/javascript" src="resources/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript">;</script>
<script type="text/javascript">
	const app = new Vue({
		el:'#app',		
			data:{
				role:0,
				username:'',
				password:'',
                captcha:'user/captcha',
                verCode:''
			},
			methods:{
				login() {
					console.log(this.username+this.password+this.role);
					this.$http.post('user/login', {username:this.username, password:this.password,role:this.role, verCode:this.verCode},{emulateJSON:true}).then(function (res) {
                          console.log(res.body);
                        if (res.body.success) {
                          window.location.href = "backIndex";
                        } else {
                          alert(res.body.errMsg);
                          this.changeCaptcha();
                        }
                    },function(){
                          console.log('请求失败处理');
                    });
				},
              changeCaptcha() {
				this.captcha = 'user/captcha?'+Math.random();
              }
			}
	});

</script>
</body>
</html>